<template>
	<view class="user">
		<!-- <image src="../../static/userBg2.png" style="width:100%;position: absolute;height:300rpx"></image> -->
		<view class="bg"></view>
		<view class="bg-circle"></view>
		<view class="user-box w94 flex-between" @click="to('/subpack/user/syset')">
			<view class="flex-start items-center" style="z-index: 99;">
				<view>
					<image :src="info.avatar" class="head-img" v-if="info.avatar"></image>
					<image src="@/static/lg.png" class="head-img" v-else></image>
				</view>
				<view style="margin-left: 14rpx;">
					<view style="font-size: 36rpx;font-weight: bold;color:#000;">{{info.nickname||"用户9527686"}}</view>
					<view style="font-size: 28rpx;color:#323232;">ID:{{info.id||9527}}</view>
					<view style="font-size: 24rpx;color:#323232;">查看或编辑个人资料</view>
				</view>
			</view>
		</view>

		<view class="w94 radius20 bgwhite money">
			<view class="w96" style="padding-top:20rpx">
				<image src="../../static/users/money.png" mode=""
					style="width: 40rpx; height: 40rpx;vertical-align: bottom;padding-right: 20rpx;"></image>
				<label style="font-weight: bold;font-size: 32rpx;">我的钱包</label>
				<view class="" style="margin-top: 20rpx;">
					￥ {{info.money||'50000000000'}}
				</view>
			</view>
			<view class="Withdrawal radius20" @click="to('/subpack/user/money')">
				<!-- <button>提现</button> -->
				提现
			</view>
		</view>

		<view class="w94 radius20 bgwhite" style="z-index: 99;margin-top: 20rpx;padding: 20rpx;">
			<view class=" flex" style="padding: 16rpx;" v-for="item in list1" :key="item.name" @click="to(item.path)">
				<u-icon :name="item.icon" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="40"
					label-size="40"></u-icon>
				<view class="w96 flex-between" style="padding-left:20rpx">
					<label style="font-size: 32rpx;">{{item.name}}</label>
					<u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
						label-size="24"></u-icon>
				</view>
			</view>

		</view>

		<view class="w94 radius20 bgwhite" style="z-index: 99;margin-top: 20rpx;padding: 20rpx;">
			<view class=" flex" style="padding: 16rpx;" v-for="item in list2" :key="item.name" @click="to(item.path)">
				<u-icon :name="item.icon" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="40"
					label-size="40"></u-icon>
				<view class="w96 flex-between" style="padding-left:20rpx">
					<label style="font-size: 32rpx;">{{item.name}}</label>
					<u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
						label-size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="w94 radius20 bgwhite" style="z-index: 99;margin-top: 20rpx;padding: 20rpx;">
			<view class=" flex" style="padding: 16rpx;" v-for="item in list3" :key="item.name" @click="to(item.path)">
				<u-icon :name="item.icon" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="40"
					label-size="40"></u-icon>
				<view class="w96 flex-between" style="padding-left:20rpx">
					<label style="font-size: 32rpx;">{{item.name}}</label>
					<u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
						label-size="24"></u-icon>
				</view>
			</view>
		</view>



		<!-- 
		<u-popup v-model="showPhone" @close="showPhone=false" border-radius="10" mode="bottom"
			:customStyle="{'width':'100%'}">
			<view class="w94">
				<u-cell-group>
					<u-cell-item :border="false" :arrow="false" :title="'客服'+(index+1)" :label="item"
						@click="openPhone(item)" v-for="(item,index) in phones" :key="index">
						<u-icon slot="right-icon" size="32" name="phone-fill"></u-icon>
					</u-cell-item>
				</u-cell-group>
			</view>
		</u-popup> -->

	</view>
</template>

<script>
	import {
		getuserinfo
	} from '@/common/teacherReq';
	export default {
		data() {
			return {
				showPhone: false,
				list1: [{
					name: '订单统计',
					icon: '/static/users/1.png',
					path: '/subpack/user/list/ordercount'
				}, {
					name: '售后',
					icon: '/static/users/2.png',
					path: '/subpack/user/list/aftersale'
				}, {
					name: '自动抢单/派单',
					icon: '/static/users/3.png',
					path: '/subpack/user/list/roborder'
				}, {
					name: '居住地址',
					icon: '/static/users/4.png',
					path: '/subpack/login/adress?type=2'
				}, {
					name: '商务合作项目',
					icon: '/static/users/5.png',
					path: '/subpack/user/list/cooperate'
				}, {
					name: '引荐奖励',
					icon: '/static/users/12.png',
					path: '/subpack/user/list/recom'
				}],
				list2: [{
					name: '资质认证',
					icon: '/static/users/6.png',
					path: '/subpack/user/list/auth'
				}, {
					name: '服务技术',
					icon: '/static/users/7.png',
					path: '/subpack/login/adress?type=3'
				}, {
					name: '技能证书',
					icon: '/static/users/8.png',
					path: '/subpack/user/list/authbook'
				}],
				list3: [{
					name: '联系客服',
					icon: '/static/users/9.png',
					path: '/pages/message/index'
				}, {
					name: '设置',
					icon: '/static/users/10.png',
					path: '/subpack/user/syset'
				}, {
					name: '关于',
					icon: '/static/users/11.png',
					path: '/subpack/user/list/about'
				}, ],
				info: {}
			}
		},
		computed: {

		},
		methods: {
			to(url) {
				if (url == '/pages/message/index') {
					uni.switchTab({
						url,
					})
				} else {
					uni.navigateTo({
						url,
					})
				}

			},
			openPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //电话号码
					success: function(e) {
						console.log(e);
					},
					fail: function(e) {
						console.log(e);

					}
				})
			},
			goMoney() {
				uni.navigateTo({
					url: '/subpack/user/money',
				})
			},
			getUser() {
				getuserinfo({}).then(res => {
					this.info = res.data.userinfo
					uni.setStorageSync('info', res.data.userinfo)
				})
			}
		},
		onLoad(opt) {},
		onShow() {
			this.getUser()

		}
	}
</script>

<style lang="scss" scoped>
	.user {
		overflow-x: hidden !important;
		position: relative;


		.bg {
			width: 100%;
			position: absolute;
			height: 170rpx;
			background-color: $uni-color-primary;
			z-index: -1;
		}

		.bg-circle {
			width: 1200rpx;
			position: absolute;
			height: 866rpx;
			background-color: $uni-color-primary;
			// background-color: #000;
			z-index: -2;
			border-radius: 50%;
			top: -590rpx;
			left: -236rpx;
			overflow-x: hidden !important;
		}

		.user-box {
			// padding-top: 100rpx;
			padding: 0 60rpx;
		}

		.head-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
		}

		.grid-text {
			font-size: 24rpx;
			margin-top: 12rpx;
			color: #000;
		}


		.sm-item {
			width: 25%;
			flex-direction: column;
		}

		.sm-item-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #000;
		}

		.sm-item-tips {
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}

		.sm_cur {
			color: #2d80fd
		}

		.money {
			z-index: 99;
			margin-top: 20rpx;
			display: flex;
			padding: 40rpx;

			.Withdrawal {
				width: 40%;
				height: 60rpx;
				background-color: $uni-color-primary-deep;
				text-align: center;
				line-height: 60rpx;
				// box-shadow: 10rpx 10rpx 10rpx $uni-color-primary;
				color: #fff;
				margin-top: 20rpx;
			}
		}
	}
</style>